import { Component } from 'react';
import { Map, View, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import _ from 'lodash';

class TaroMap extends Component {
  handleCalloutTap = (event) => {
    const { title } = this.state['markers'][event.detail['markerId']-1];
    console.log(event.detail['markerId']);
    console.log(this.state['markers'][event.detail['markerId']-1]);
    // 跳转到指定页面，并传递 title 参数
    Taro.navigateTo({
      url: `../searchRestaurants/index?sst=${title}`,
    });
  };
  
    state = {
        longitude: 100,
        latitude: 90,
        circles: [],
        markers: [
          {
            id: 1,
            latitude: 30.511136, 
            longitude: 114.419121,
            title: "东一学生食堂",
            //iconPath: 'cloud://prod-0g6virbea3062996.7072-prod-0g6virbea3062996-1322280255/tabbar/map_marker_icon.svg',
            //iconPath: '@/assets/map_marker_icon.svg',
            //width: 24,
            //height: 24,
            callout: {
              content: '东一学生食堂',
              color: '#000000',
              fontSize: 14,
              borderRadius: 5,
              bgColor: '#ffffff',
              padding: 10,
              display: 'ALWAYS',
              anchorX: 0.5, // 水平方向的偏移，取值范围 [0, 1]，0 为左边缘，1 为右边缘
              anchorY: 1,   // 垂直方向的偏移，取值范围 [0, 1]，0 为顶边缘，1 为底边缘
              borderWidth: 1,
              borderColor: '#ccc',
              textAlign: 'center', // 气泡文本对齐方式，可选值为 'left'、'right'、'center'
            },
          },
          {
            id: 2,
            latitude: 30.5161357, 
            longitude: 114.4078183,
            title: "百景园",
            callout: {
              content: '百景园',
              color: '#000000',
              fontSize: 14,
              borderRadius: 5,
              bgColor: '#ffffff',
              padding: 10,
              display: 'ALWAYS',
              anchorX: 0.5, // 水平方向的偏移，取值范围 [0, 1]，0 为左边缘，1 为右边缘
              anchorY: 1,   // 垂直方向的偏移，取值范围 [0, 1]，0 为顶边缘，1 为底边缘
              borderWidth: 1,
              borderColor: '#ccc',
              textAlign: 'center', // 气泡文本对齐方式，可选值为 'left'、'right'、'center'
            },
          },
          {
            id: 3,
            latitude: 30.51086845217425, 
            longitude: 114.41971431563331,
            title: "紫荆园",
            callout: {
              content: '紫荆园',
              color: '#000000',
              fontSize: 14,
              borderRadius: 5,
              bgColor: '#ffffff',
              padding: 10,
              display: 'ALWAYS',
              anchorX: 0.5, // 水平方向的偏移，取值范围 [0, 1]，0 为左边缘，1 为右边缘
              anchorY: 1,   // 垂直方向的偏移，取值范围 [0, 1]，0 为顶边缘，1 为底边缘
              borderWidth: 1,
              borderColor: '#ccc',
              textAlign: 'center', // 气泡文本对齐方式，可选值为 'left'、'right'、'center'
            },
          },
          {
            id: 4,
            latitude: 30.5160578, 
            longitude: 114.414826,
            title: "喻园",
            callout: {
              content: '喻园',
              color: '#000000',
              fontSize: 14,
              borderRadius: 5,
              bgColor: '#ffffff',
              padding: 10,
              display: 'ALWAYS',
              anchorX: 0.5, // 水平方向的偏移，取值范围 [0, 1]，0 为左边缘，1 为右边缘
              anchorY: 1,   // 垂直方向的偏移，取值范围 [0, 1]，0 为顶边缘，1 为底边缘
              borderWidth: 1,
              borderColor: '#ccc',
              textAlign: 'center', // 气泡文本对齐方式，可选值为 'left'、'right'、'center'
            },
          },
          {
            id: 5,
            latitude: 30.5108051, 
            longitude: 114.4202371,
            title: "东三食堂",
            callout: {
              content: '东三食堂',
              color: '#000000',
              fontSize: 14,
              borderRadius: 5,
              bgColor: '#ffffff',
              padding: 10,
              display: 'ALWAYS',
              anchorX: 0.5, // 水平方向的偏移，取值范围 [0, 1]，0 为左边缘，1 为右边缘
              anchorY: 1,   // 垂直方向的偏移，取值范围 [0, 1]，0 为顶边缘，1 为底边缘
              borderWidth: 1,
              borderColor: '#ccc',
              textAlign: 'center', // 气泡文本对齐方式，可选值为 'left'、'right'、'center'
            },
          },
          {
            id: 6,
            latitude: 30.514154217378824, 
            longitude: 114.40585099359488,
            title: "西一学生食堂",
            callout: {
              content: '西一学生食堂',
              color: '#000000',
              fontSize: 14,
              borderRadius: 5,
              bgColor: '#ffffff',
              padding: 10,
              display: 'ALWAYS',
              anchorX: 0.5, // 水平方向的偏移，取值范围 [0, 1]，0 为左边缘，1 为右边缘
              anchorY: 1,   // 垂直方向的偏移，取值范围 [0, 1]，0 为顶边缘，1 为底边缘
              borderWidth: 1,
              borderColor: '#ccc',
              textAlign: 'center', // 气泡文本对齐方式，可选值为 'left'、'right'、'center'
            },
          },
          {
            id: 7,
            latitude: 30.516830048024765, 
            longitude: 114.41492562260704,
            title: "集贸市场",
            callout: {
              content: '集贸市场',
              color: '#000000',
              fontSize: 14,
              borderRadius: 5,
              bgColor: '#ffffff',
              padding: 10,
              display: 'ALWAYS',
              anchorX: 0.5, // 水平方向的偏移，取值范围 [0, 1]，0 为左边缘，1 为右边缘
              anchorY: 1,   // 垂直方向的偏移，取值范围 [0, 1]，0 为顶边缘，1 为底边缘
              borderWidth: 1,
              borderColor: '#ccc',
              textAlign: 'center', // 气泡文本对齐方式，可选值为 'left'、'right'、'center'
            },
          },
          {
            id: 8,
            latitude: 30.516433189725053, 
            longitude: 114.41537824538007,
            title: "麦当劳",
            callout: {
              content: '麦当劳',
              color: '#000000',
              fontSize: 14,
              borderRadius: 5,
              bgColor: '#ffffff',
              padding: 10,
              display: 'ALWAYS',
              anchorX: 0.5, // 水平方向的偏移，取值范围 [0, 1]，0 为左边缘，1 为右边缘
              anchorY: 1,   // 垂直方向的偏移，取值范围 [0, 1]，0 为顶边缘，1 为底边缘
              borderWidth: 1,
              borderColor: '#ccc',
              textAlign: 'center', // 气泡文本对齐方式，可选值为 'left'、'right'、'center'
            },
          },
        ]
      }
      
      componentDidMount() {
        this.getCurrentLocation();
      }
      
      getCurrentLocation = async () => {
        const res = await Taro.getLocation({ type: 'gcj02' });
        const { longitude, latitude } = res;
        this.setState({
          longitude,
          latitude,
          circles: [{
            longitude, 
            latitude, 
            color: 'red', 
            fillColor: 'rgba(137, 207, 240, 0.5)', 
            radius: 5
          }],
        });
      }

      // 防抖500毫秒
    onRegionChange = _.debounce(async (e) => {
      const { type, detail } = e;
      // 拖动地图会触发两次onRegionChange事件，我们只需要拖动结束时的事件
      if (type === 'end') {
        const { centerLocation: { longitude, latitude } } = detail;
        this.setState({ 
              longitude, latitude, 
              circles: [{
                longitude, 
                latitude, 
                color: 'red', 
                fillColor: 'rgba(137, 207, 240, 0.5)', 
                radius: 5
              }], 
          });
        }
      }
     , 500);
    
      render() {
        const { longitude, latitude, circles, markers } = this.state;
      
        return (<Map
          id="taroMap"
          longitude={longitude}
          latitude={latitude}
          show-location
          circles={circles}
          scale={18}
          maxScale={20}
          minScale={16}
          subkey="6H7BZ-7XWKQ-PXJ5U-2N64A-56KNO-66B3L"
          style={{width:"100%", height:"100%"}}
          markers={markers}
          onMarkerTap={this.handleCalloutTap}
          onCallOutTap={this.handleCalloutTap}
        >
        <View className="center">
            <Image className="center--image" src='./marker.png' />
        </View>
        </Map>
        );
      }
}
export default TaroMap;